<template>
	<view class="page user-info">
		<nav-header title="好友详情" :show-right="false">
			<template v-slot:left>
				<view v-if="from" @tap="goChat">
					<svg-icon icon="arrowLeft"></svg-icon>
				</view>
				<view v-else @tap="goBack">
					<svg-icon icon="arrowLeft"></svg-icon>
				</view>
			</template>
		</nav-header>
		<view class="content">
			<view @click="onShowFullImage()">
				<head-image :name="userInfo.nickName" :url="userInfo.headImageThumb" :size="100"></head-image>
			</view>

			<view class="info-item">
				<view class="info-primary">
					<text class="info-username text-md-Medium">
						{{ nickName }}
					</text>
					<view class="info-sex">
						<view v-if="userInfo.sex == 0" class="fc">
							<view class="icon">
								<svg-icon icon="sex" :width="32"></svg-icon>
							</view>
							<text class="text-sm-Regular">男</text>
						</view>
						<view v-if="userInfo.sex == 1" class="fc">
							<view class="icon">
								<svg-icon icon="woman" :width="32"></svg-icon>
							</view>
							<text class="text-sm-Regular">女</text>
						</view>
						<!-- <uni-icons v-show="userInfo.sex == 0" class="sex-boy" type="person-filled" size="20"
							color="darkblue"></uni-icons>
						<uni-icons v-show="userInfo.sex == 1" class="sex-girl" type="person-filled" size="20"
							color="darkred"></uni-icons> -->
					</view>
				</view>
				<!-- <text>
					用户名 ：{{ userInfo.userName }}
				</text>
				<text>
					友号 ：{{ userInfo.userFriendId }} <text style="margin-left: 10rpx;"> 商号
						：{{ userInfo.userBusinessId }}</text>
				</text>
				<text v-if="userInfo.hometown">
					故乡 ：{{ userInfo.hometown }}
				</text> -->
			</view>
		</view>

		<view class="container">
<!-- 			<view>
				<text class="text-sm-Regular title">用户名：</text>
				<text class="text-sm-Regular">{{ userInfo.userName }}</text>
			</view> -->
			<view class="userId">
				<view>
					<text class="text-sm-Regular title">友号：</text>
					<text class="text-sm-Regular">{{ userInfo.userFriendId }}</text>
				</view>
				<text class="divider">|</text>
				<view>
					<text class="text-sm-Regular title">商号：</text>
					<text class="text-sm-Regular">{{ userInfo.userBusinessId }}</text>
				</view>
			</view>
			<view v-if="userInfo.hometown">
				<text class="text-sm-Regular title">故乡：</text>
				<text class="text-sm-Regular">{{ hometownReplace }}</text>
			</view>
		</view>

		<view class="person-signature" v-if="userInfo.signature">
			<text class="text-sm-Regular title">个性签名：</text>
			<text class="text-sm-Regular">{{userInfo.signature}}</text>
		</view>

		<up-cell-group style="background-color: white;" class="cell-group" v-if="!isMe">
			<up-cell is-link title="设置备注" v-if="isFriend" :url="'/pageSubOne/common/user-beizhu?id=' + this.addId" />
			<up-cell is-link title="好友圈" v-if="isFriend"
				:url="'/pageSubOne/moments/user-moments?type=0&id=' + this.addId" />
			<up-cell is-link title=" 友商圈" v-if="isFriend"
				:url="'/pageSubOne/moments/user-moments?type=1&id=' + this.addId" />
			<!-- #ifndef H5 -->
			<!-- <button style="background-color: transparent;border: none;display: flex;justify-content: space-between;align-items: center;" open-type="share">
				<up-cell is-link title="分享名片" />
			</button> -->
			<!-- #endif -->
			<!-- #ifdef H5 -->
			<!-- <up-cell is-link title="分享名片" @tap="shareClick" /> -->
			<!-- #endif -->
			<up-cell title="加入黑名单">
				<template v-slot:value>
					<up-switch v-model="isBlocked" active-color="#17B26A" asyncChange @change="asyncChange"></up-switch>
				</template>
			</up-cell>
			<up-cell is-link title="投诉举报" :url="'/pageSubOne/common/user-tousu?id=' + this.addId" />
		</up-cell-group>
		<up-cell-group style="background-color: white;" class="cell-group" v-if="!isMe && userInfo.id!=190">
			<up-cell is-link title="我和他共同的群聊" :value="`${commonNum}`" v-if="isFriend"
				:url="'/pageSubOne/common/user-group?type=common&id=' + this.addId" />
			<up-cell is-link title="他加入的官方群" :value="`${groupNum}`" v-if="isFriend"
				:url="'/pageSubOne/common/user-group?type=him&id=' + this.addId" />
		</up-cell-group>
		<view class="btn-group" v-if="!isMe">
			<view class="btn" v-if="isFriend && !fromThis">
				<button class="btn send" plain @click="onSendMessage()">
					<text class="text-md-Medium">发消息</text>
				</button>
			</view>
			<view class="btn" v-if="!isFriend">
				<button type="primary" class="btn btncolor" @click="onAddFriend()">
					<text class="text-md-Medium" v-if="sourceType!=1">加为好友</text>
					<text class="text-md-Medium" v-else>加为友商</text>
				</button>
			</view>
			<view class="btn" v-if="isFriend">
				<button class="btn" type="warn" @click="onDelFriend()">
					<text class="text-md-Medium" v-if="sourceType!=1">删除好友</text>
					<text class="text-md-Medium" v-else>删除友商</text>
				</button>
			</view>
		</view>
		<!-- 分享 ref: 设置一个唯一ref contentHeight：弹框高度 shareList：分享数组 click：分享菜单按钮点击 -->
		<cc-shareMenu ref="share" :contentHeight="580" :shareList="shareList" @click="shareMenuClick"></cc-shareMenu>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				chatIdx: null,
				userInfo: {},
				addId: "",
				isBlocked: false,
				friendType: null,
				nickName: null,
				// 聊天来源
				sourceType: null,
				// 是否是从自己的聊天记录进入的
				fromThis: null,
				commonNum: '',
				groupNum: '',
				from: null, //是否是转发进来的
				isBusinessFriend: null, //是否为友商
				share: { //分享
					title: '友星缘',
					path: '/pageSubOne/common/user-info',
					imageUrl: 'https://file.dgyxy.com/resource/backgroud2.png',
					desc: '通过友星缘，添加我为好友吧',
					content: ''
				},
				shareList: [{
						type: 1,
						icon: this.getResource('/icon/fx4.svg'),
						text: '微信好友'
					},
					{
						type: 2,
						icon: this.getResource('/icon/fx1.svg'),
						text: '好友'
					},
					{
						type: 3,
						icon: this.getResource('/icon/fx2.svg'),
						text: '商友'
					},
					{
						type: 4,
						icon: this.getResource('/icon/fx6.svg'),
						text: '链接'
					},
					{
						type: 5,
						icon: this.getResource('/icon/fx3.svg'),
						text: 'QQ好友'
					},
					{
						type: 6,
						icon: this.getResource('/icon/fx5.svg'),
						text: '微博'
					},
					{
						type: 7,
						icon: this.getResource('/icon/fx7.svg'),
						text: '分享海报'
					},
				]
			}
		},
		methods: {
			goChat() {
				uni.switchTab({
					url: "/pages/tabbar/chat"
				})
			},
			goBack() {
				uni.navigateBack()
			},
			goShareClick() {
				this.$refs.share.toggleMask();
			},

			shareClick() {
				this.copyText(this.qrUrl, () => {
					uni.showToast({
						icon: 'success',
						title: '已将分享链接复制到剪贴板，您可以将剪贴板内容复制给好友，在浏览器中点击链接加入',
						duration: 4000
					})
				})
			},

			shareMenuClick(name) {

				uni.showModal({
					title: '温馨提示',
					content: '点击的分享菜单名称是 = ' + name
				})
			},
			asyncChange(e) {
				uni.showModal({
					title: "提示",
					content: e ? '确定要拉黑该用户吗' : '确定要取消拉黑吗',
					success: (res) => {
						if (res.confirm) {
							this.isBlocked = e;
						}
					}
				})
			},
			onShowFullImage() {
				let imageUrl = this.userInfo.headImage;
				if (imageUrl) {
					uni.previewImage({
						urls: [imageUrl]
					})
				}
			},
			onSetTouSu() {
				uni.navigateTo({
					url: "/pageSubOne/common/user-tousu?id=" + this.addId
				})
			},
			onGoMoments() {
				uni.navigateTo({
					url: "/pageSubOne/moments/moments?id=" + this.addId
				})
			},
			onGoBsMoments() {
				uni.navigateTo({
					url: "/pageSubOne/business-moments/business-moments?id=" + this.addId
				})
			},
			onSendMessage() {
				// 使用 chatStore 中定义的常量
				const type = this.sourceType == 0 ?
					this.chatStore.chatType.PRIVATE :
					this.chatStore.chatType.BUSINESS;
				console.log("this.fromThis", this.fromThis)
				this.chatStore.openChatRedirect(type, this.userInfo.id, {
					fromThis: this.fromThis,
					sourceType: this.sourceType
				})
			},
			onAddFriend() {
				uni.navigateTo({
					url: `/pageSubOne/common/user-add?id=${this.addId}&friendType=${this.friendType}&sourceType=${this.sourceType}`
				})
			},
			onDelFriend() {
				uni.showModal({
					title: "是否确认删除",
					content: `确认删除 '${this.userInfo.nickName}',并删除聊天记录吗?`,
					success: (res) => {
						if (res.cancel)
							return;
						this.$http({
							url: `/friend/delete/${this.friendType}/${this.userInfo.id}`,
							method: 'delete'
						}).then((data) => {
							this.friendStore.removeFriend(this.userInfo.id);
							this.chatStore.removePrivateChat(this.userInfo.id);
							if (this.friendType == 1) {
								uni.showToast({
									title: `与 '${this.userInfo.nickName}'的友商关系已解除`,
									icon: 'none'
								})
							} else {
								uni.showToast({
									title: `与 '${this.userInfo.nickName}'的好友关系已解除`,
									icon: 'none'
								})
							}
							if (this.sourceType == 1) {
								this.loadBusinessFriend(this.addId)
							}
						})
					}
				})
			},
			loadBusinessFriend(id) {
				this.$http({
					url: `/friend/checkFriendByFriendIdAndType?friendId=${id}&friendType=${this.friendType}`,
					method: "GET"
				}).then((data) => {
					console.log("好友信息", data.result)
					this.isBusinessFriend = data.result
				})
			},
			// updateFriendInfo() {
			// 	// store的数据不能直接修改，深拷贝一份store的数据
			// 	let friend = JSON.parse(JSON.stringify(this.friendInfo));
			// 	friend.headImage = this.userInfo.headImageThumb;
			// 	friend.nickName = this.userInfo.nickName;
			// 	this.$http({
			// 		url: "/friend/update",
			// 		method: "PUT",
			// 		data: friend
			// 	}).then(() => {
			// 		// 更新好友列表中的昵称和头像
			// 		this.friendStore.updateFriend(friend);
			// 		// 更新会话中的头像和昵称
			// 		this.chatStore.updateChatFromFriend(this.userInfo);
			// 	})
			// },
			loadCommonGroup(id) {
				if (id != 190) {
					this.$http({
						url: `/group/findGroupWithFriendCount/${id}`,
						method: "GET"
					}).then((data) => {
						if (data) {
							this.commonNum = `${data}个`
						} else {
							this.commonNum = "无"
						}
					})

					this.$http({
						url: `/group/findFriendOfficialGroupCount/${id}`,
						method: "GET"
					}).then((data) => {
						if (data) {
							this.groupNum = `${data}个`
						} else {
							this.groupNum = "无"
						}
					})
				}
			},
			loadUserInfo(id) {
				this.$http({
					// url: "/user/find/" + id,
					url: "/friend/find/" + id,
					method: 'GET'
				}).then((user) => {
					if (user.nickName == null) {
						this.nickName = user.user.nickName
					} else {
						this.nickName = user.nickName
					}
					user.user.userFriendId = this.padNumber(user.user.userFriendId);
					user.user.userBusinessId = this.padNumber(user.user.userBusinessId);
					this.userInfo = user.user;
					console.log("user", user)
					// 如果发现好友的头像和昵称改了，进行更新
					// if (this.isFriend && (this.userInfo.headImageThumb != this.friendInfo.headImage ||
					// 		this.userInfo.nickName != this.friendInfo.nickName)) {
					// 	this.updateFriendInfo()
					// }
				})
			},
			padNumber(number) {
				return number.toString().padStart(6, '0');
			}
		},
		computed: {
			isFriend() {
				if (this.sourceType == 0 || this.sourceType == 2) {
					return !!this.friendInfo;
				} else {
					return this.isBusinessFriend
				}
			},
			isMe() {
				return this.userStore.userInfo.id == this.addId
			},
			friendInfo() {
				let friends = this.friendStore.friends;
				let friend = friends.find((f) => f.id == this.userInfo.id && f.friendType == 0);
				return friend;
			},
			hometownReplace() {
				// const formattedAddress = this.userInfo.hometown.replace(/省|市|区|镇|街道|村|社区|委员会/g, '$&-');
				// return formattedAddress.replace(/-$/, '');

				return this.userInfo.hometown
					// ✅ 核心修复：使用更精准的负向断言
					.replace(
						/(?<!市辖区)(市|省|区|镇|街道|村|社区|委员会)(?!\s*(辖区|县|镇|乡))/g,
						'$&-' // 仅对非组合词添加连字符
					)
					.replace(/-$/, ''); // 移除末尾多余连字符
			}
		},
		onShow() {
			this.friendStore.loadFriend()
		},
		onLoad(options) {
			console.log(options);
			this.chatIdx = options.chatIdx || null
			if (options.sourceType == 2) {
				this.sourceType = 1
			} else {
				this.sourceType = options.sourceType
			}
			this.fromThis = options.fromThis == 'true'
			this.from = options.from;
			// 查询用户信息
			this.loadUserInfo(options.id);
			// 查询共同群聊以及官方群的数量
			this.loadCommonGroup(options.id)
			this.addId = options.id
			if (options.friendType == 2) {
				this.friendType = 1
			} else {
				this.friendType = options.friendType
			}
			if (this.sourceType == 1) {
				this.loadBusinessFriend(options.id)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.user-info {
		background-color: #FCFDFE;

		.cell-group {
			// padding-top: 40rpx;

			:deep(.u-line) {
				display: none;
			}
		}

		.content {
			background-color: white;
			// height: 300rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			gap: 24rpx;
			padding: 24rpx 30rpx;
			font-size: 27rpx;

			.info-item {
				display: flex;
				align-items: flex-start;
				flex-direction: column;
				// padding-left: 40rpx;
				// padding-top: 40rpx;
				flex: 1;

				.info-primary {
					display: flex;
					flex-direction: column;
					// align-items: center;
					gap: 12px;

					.info-username {
						font-size: 36rpx;
						font-weight: 600;
					}

					.info-sex {
						display: flex;
						align-items: center;

						.fc {
							display: flex;
							justify-content: center;
							align-items: center;
						}

						text {
							margin-left: 8rpx;
						}
					}
				}
			}
		}

		.container {
			padding: 24rpx 32rpx;
			display: flex;
			justify-content: center;
			flex-direction: column;
			gap: 16rpx;
			color: $gray-600;

			.title {
				color: $gray-400;
			}

			.divider {
				font-size: 20rpx;
				color: $gray-200;
			}

			.userId {
				display: flex;
				align-items: center;
				gap: 16rpx;
			}
		}

		.person-signature {
			word-wrap: break-word;
			padding: 24rpx 32rpx;
			display: flex;
			justify-content: center;
			flex-direction: column;
			gap: 16rpx;
			color: $gray-600;

			.title {
				color: $gray-400;
			}
		}

		.nav-list {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 20rpx 40rpx;
			font-size: 30rpx;
		}


		.line {
			margin: 20rpx;
			border-bottom: 1px solid #dddddd;
		}

		.btn-group {
			display: flex;
			flex-direction: column;
			padding: 42rpx 30rpx;
			gap: 24rpx;

			.btn {
				// margin-top: 20rpx;
				line-height: 80rpx;
				border-radius: 50rpx;
			}

			.send {
				border: 1px solid $brand-500;
				color: $brand-500;
			}

			.btncolor {
				background-color: $brand-500;
				color: #fff;
			}

		}
	}
</style>